/*
 * @# mplayer.js 2011-11-30 上午10:33:38
 * 
 * Copyright (C) 2010 - 2011 广州羿安信息科技有限公司
 * Guangzhou ianswer information technology co. ltd.
 * 
 * All rights reserved!
 */
 
/**
 * music player based on jplayer.
 * 
 * @author alvin hwang
 */
window.mplayer = window.mplayer || {
	guid : 0,
	init : function(options) {
		new MusicPlayer("mplayer_" + this.guid, "jplayer_flash_" + this.guid, options);
		this.guid++;
	}	
};

/**
 * @param mplayerId
 *            容纳mplayer的id.
 * @param jplayerId
 *            容纳jplayer的id.
 * @param options
 *            mplayer的参数.
 */
function MusicPlayer(mplayerId, jplayerId, options) {
	if (arguments.length) {
		this.mpId = mplayerId;
		this.jpId = jplayerId;
		this.$jp = null;
		this.jp = null;
		this.$element = null;
		this.options = $.extend(true, {},
			this.options,
			options
		);
		this._init();
	}
};

MusicPlayer.prototype = {
	count : 0, // static
	version : { // static
		script: "1.0.0",
		jplayer: "2.1.0"
	},
	options : {
		src : false, // 音乐地址
		name : false, // 歌曲名
		artist : false, // 演唱者
		musicId : false, // 音乐资源的唯一标识
		initCallback : false, // 初始化的回调函数
		autoPlay : false, // 是否自动播放
		swfPath : window.ctx + '/js/jquery/jplayer/' // jplayer swf的路径
	},
	_init : function() {
		this._renderHtml();
		
		this.$jp = $('#' + this.jpId);
		this.jp = $('#' + this.jpId)[0];
		this.$element = $('#' + this.mpId);
		
		this._bindJPlayerEvent();
		this._initJPlayer();
		
		MusicPlayer.prototype.count++;
	},
	_renderHtml : function() {
		var html = '<div class="music-player" id="#{mplayerId}">' +
					'<a href="#play" class="play jp-play" style="display: block;" onclick="return false"></a>' +
					'<a href="#pause" class="pause jp-pause" style="display: none;" onclick="return false"></a>' +
					'<div class="playing"><div class="jp-play-bar playing-i"></div></div>' +
					'<div class="info jp-info"><div class="info-i jp-info-i"><nobr>#{name} - #{artist}</nobr></div></div>' +
					'<div class="time jp-current-time">00:00</div>' +
					'<div class="playing-mask">' +
						'<a class="jp-seek-bar playing-mask-i" onclick="return false" href="#" style="width: 100%;" onclick="return false"></a>' +
					'</div>' +
				'</div>' +
				'<div class="jp-jplayer" id="#{jplayerId}" style="width: 0px; height: 0px;"></div>';
		html = html.replace(/#\{mplayerId\}/g, this.mpId)
					.replace(/#\{jplayerId\}/g, this.jpId)
					.replace(/#\{name\}/g, this.options.name || "")
					.replace(/#\{artist\}/g, this.options.artist || "");
		document.write(html);
	},
	_bindJPlayerEvent : function() {
		var titleElem = $(".info nobr", this.$element)[0];
		titleElem && (this.jp.sourceInfo = titleElem.innerHTML);
		
		var self = this;
		this.$jp.bind($.jPlayer.event.play, function() {
			$(".play", self.$element).hide();
			$(".pause", self.$element).show();
			self.$jp.jPlayer("pauseOthers");
			(self.jp.startScroll || function(){})();
			titleElem &&  (titleElem.innerHTML = self.jp.sourceInfo);
		});
		
		this.$jp.bind($.jPlayer.event.pause, function() {
			$(".pause", self.$element).hide(),
			$(".play", self.$element).show(),
			(self.$jp.stopScroll || function(){})();
		});
		
		this.$jp.bind($.jPlayer.event.error, function() {
			var timeElem = $(".time", self.$element)[0];
			titleElem && (titleElem.innerHTML = "呃，出错了 :("),
			timeElem && (timeElem.innerHTML="");
		});
	},
	_initJPlayer : function() {
		var self = this;
		this.$jp.jPlayer({
			ready : function() {
				self._initScroll();
				self.options.src && $(this).jPlayer("setMedia", { mp3 : self.options.src });
				self.options.autoPlay && $(this).jPlayer("play");
				(self.options.initCallback || function(){})();
			},
			preload : "metadata",
			volume : 1,
			muted : !1,
			swfPath : self.options.swfPath,
			supplied : "mp3",
			wmode : "window",
			cssSelectorAncestor : ('#' + self.mpId)
		});
	},
	_initScroll : function() { // TODO 暂时没有读懂这块的逻辑
		var self = this;
		var j = 2,
			$titleElem = $(".info-i nobr", this.$element),
			titleWidth = $titleElem.width(), 
			titleElem = $titleElem[0],
			frequency = 200, interval, timeout;
		if (!titleElem) {
			return;
		}
		var offsetWidth = titleElem.offsetWidth,
			l = 0,
			m = -1,
			n = [];
		if (offsetWidth > titleWidth) {
			var o = offsetWidth - titleWidth,
				p = Math.ceil(o / j);
			for(var q = 0; q < p; q++) {
				n.push((q == p - 1) ? o : j * q);
			}
			function process() {
				if(l == 0 || l == p - 1) {
					m = -m;
				}
				if(m == -1 && l == 1 || m == 1 && l == p - 2) {
					self.jp.stopScroll(),
					timeout = setTimeout(function() {
								self.jp.startScroll()
							}, 1000
						);
				}
				l += m;
				titleElem.style.marginLeft = -n[l] + "px";
			}
			this.jp.startScroll = function() {
				interval = setInterval(process, frequency);
			},
			this.jp.stopScroll = function() {
				clearInterval(interval),
				clearTimeout(timeout),
				titleElem.style.marginLeft = 0
			}
		}
	}
};
